<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"      
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">

    <body>

        <ui:composition template="./templateBanque.xhtml">

            <ui:define name="top">
                <center>Comptes Bancaires</center>

            </ui:define>



            <ui:define name="content">
                <f:view>
                    <h:form>   
                        <h1><center><h:outputText value="Liste de tous les comptes bancaires"/></center></h1>
                        <p:dataTable id="dataTable" var="compte" value="#{compteMBean.listePourAffichage}" widgetVar="compteTable"  paginator="true"  
                                     rows="10" emptyMessage="Aucun compte pour cette recherche" filteredValue="#{compteMBean.listePourAffichage}">  
                            <f:facet name="header">  
                                <p:outputPanel>  
                                    <h:outputText value="Recherche : " />  
                                    <p:inputText id="globalFilter" onkeyup="compteTable.filter()" style="width:150px" />  
                                </p:outputPanel>  
                            </f:facet>  

                            <p:column id="idColumn" filterBy="#{compte.id}" 
                                      headerText="Numéro de compte" sortBy="#{compte.id}" style="width:150px"
                                      filterMatchMode="contains">  
                                <h:commandLink action="#{compteMBean.showDetails(compte)}" value="#{compte.id}"/>   
                            </p:column>  
                            <p:column id="nomColumn" filterBy="#{compte.nomProprietaire}"   sortBy="#{compte.nomProprietaire}" 
                                      headerText="Nom"  style="width:300px"
                                      filterMatchMode="contains">  
                                <h:outputText value="#{compte.nomProprietaire}" />  
                            </p:column>  
                            <p:column id="soldeColumn" headerText="Solde" sortBy="#{compte.soldeCompte}" style="width:300px">  
                                <h:outputText value="#{compte.soldeCompte} €"  />  
                            </p:column>  

                            <p:column style="width:6%" headerText="Détails" >  
                                <p:commandButton id="selectButton"  oncomplete="carDialog.show()" icon="ui-icon-search" title="View">  
                                    <f:setPropertyActionListener value="#{compte}" target="#{compteMBean.compteBancaire}" />  
                                </p:commandButton>  
                            </p:column>  

                        </p:dataTable>  
                        <p:dialog header="Détails du compte numéro : #{compteMBean.compteBancaire.id}" widgetVar="carDialog" resizable="false" id="carDlg"  
                                  showEffect="fade" hideEffect="explode" modal="true">  

                            <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  
                                <h:commandButton value="Print" type="button" icon="ui-icon-print">  
                                    <p:printer target="display" />  
                                </h:commandButton>

                                <h:dataTable value="#{compteMBean.operationsBancairesDuCompteADetailler}" var="op">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Id"/>
                                        </f:facet>
                                        <h:outputText value="#{op.id}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Description"/>
                                        </f:facet>
                                        <h:outputText value="#{op.description}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="DateOperation"/>
                                        </f:facet>
                                        <h:outputText value="#{op.dateOperation}">
                                            <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
                                        </h:outputText>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Montant"/>
                                        </f:facet>
                                        <h:outputText value="#{op.montant}"/>
                                    </h:column>
                                </h:dataTable>
                            </h:panelGrid>  

                        </p:dialog>  

                    </h:form>

                </f:view>

            </ui:define>

            <ui:define name="bottom">
                bottom
            </ui:define>

        </ui:composition>

    </body>
</html>
